<template>
  <div class="search-history">
    <van-cell title="历史记录">
      <div v-if="isDeleteShow">
        <span @click="$emit('unpdate-histories', [])">全部删除</span>&nbsp;&nbsp;
        <span @click="isDeleteShow = false">完成</span>
      </div>
      <van-icon name="delete" v-else @click.native="isDeleteShow = true"></van-icon>
    </van-cell>
    <van-cell :title="history" v-for="(history, index) in searchHistories" :key="index" @click="handleHistoryItemClick( history, index )">
      <van-icon name="close" v-if="isDeleteShow"></van-icon>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    searchHistories: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      isDeleteShow: false
    }
  },
  computed: {},
  watch: {},
  mounted () {},
  methods: {
    handleHistoryItemClick (history, index) {
      // 在删除状态的情况下点击是删除, 非删除情况下搜索
      if (this.isDeleteShow) {
        this.searchHistories.splice(index, 1) // index页面监听 searchHistories 发生变化, 执行watch
        // 持久化处理
        // 1. 修改本地存储的数据
        // 2. 请求接口调用线上的数据 ( 单个记录删除接口不提供, 只提供删除全部 ) 接口满足不了使用, 干脆不调用接口了( 真实工作中要调接口 )
        // setItem('search-histories', this.searchHistories)
        // return
      } else {
        this.$emit('search', history)
      }
    }
  }
}

</script>
<style lang='less' scoped>
</style>
